<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="网厅账单号">
          <el-input v-model="form.bill_id" placeholder="请输入网厅账单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="系统账单号">
          <el-input v-model="form.sys_bill_id" placeholder="请输入系统账单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="form.card_id" placeholder="请输入卡号" clearable></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.plate_no" placeholder="请输入车牌号" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道">
          <template slot-scope="scope">
            <el-select v-model="form.plat_id" clearable>
              <el-option v-for="item in platTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" fixed="left" label="序号" min-width="50">
        </el-table-column>
        <el-table-column prop="bill_id" fixed="left" label="网厅账单号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sys_bill_id" fixed="left" label="系统账单号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plat_id" :formatter="formatPlatId" fixed="left" label="渠道" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="card_id" fixed="left" label="卡号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" :formatter="formatBillStatus" fixed="left" label="账单状态" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="bill_money" fixed="left" label="账单金额" min-width="50" >
        </el-table-column>
        <el-table-column prop="toll" label="通行费" min-width="50">
        </el-table-column>
        <el-table-column prop="factorace" label="服务费" min-width="50">
        </el-table-column>
        <el-table-column prop="bill_date" label="账单时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="in_station" label="入站" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="in_date" label="入站时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="out_station" label="出站" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="out_date" label="出站时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="access_detail" label="通行明细" min-width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pay_num" label="代扣次数" min-width="50">
        </el-table-column>
        <el-table-column prop="pay_date" label="代扣时间" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="notice_flag" :formatter="formatNoticeFlag" label="是否通知" min-width="50">
        </el-table-column>
        <el-table-column prop="fail_reason" label="失败原因" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="代扣明细" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" style="text-align: center" @click="lookView(scope.row)" plain><span class=" iconfont hhtx-chakan"></span></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
    <div class="dialog" v-show="isShow"  >
      <div class="dialog-box" style="padding: 1rem 1.5rem;">
        <div class="content">
          <h4 style="margin:0 0 0.94rem 0">
            <el-tag>代扣明细</el-tag>
          </h4>
          <el-table :data="withholdDetail" border height="23rem" style="overflow:auto;width: 100%;">
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column prop="sys_bill_id" label="系统账单号">
            </el-table-column>
            <el-table-column prop="bill_date" label="账单时间">
            </el-table-column>
            <el-table-column prop="pay_no" label="支付流水号">
            </el-table-column>
            <el-table-column prop="status" :formatter="formatBillStatus" label="状态">
            </el-table-column>
            <el-table-column prop="withhold_date" label="代扣时间">
            </el-table-column>
            <el-table-column prop="remarks" label="备注">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-button class="btn" @click="close" type="success">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, getWithholdDetail } from '@/api/bills'
  import { queryDict } from '@/api/queryDict'
  export default {
    data() {
      return {
        platTypeList: [],
        isShow: false,
        currentPage: 1,
        baseList: [],
        perPageNum: 10,
        totalListNum: 0,
        form: {
          bill_id: '',
          sys_bill_id: '',
          card_id: '',
          plate_no: '',
          plat_id: ''
        },
        withholdDetail: []
      }
    },
    created() {
      console.log(1234)
      this.queryPlatType()
      const params = {
        'page': this.currentPage,
        'per_num': this.perPageNum
      }
      this.fetchData(params)
    },
    methods: {
      formatPlatId(row, column) {
        return row.plat_id === '' ? '无' : row.plat_id === '12' ? '支付宝小程序' : row.plat_id === '13' ? '远联' : '未知'
      },
      formatBillStatus(row, column) {
        return row.status === '' ? '无' : row.status === '0' ? '待处理' : row.status === '1' ? '待支付' : row.status === '2' ? '支付处理中' : row.status === '3' ? '支付失败' : row.status === '4' ? '支付成功' : '未知'
      },
      formatNoticeFlag(row, column) {
        return row.notice_flag === '' ? '无' : row.notice_flag === '0' ? '否' : row.notice_flag === '1' ? '是' : '未知'
      },
      queryPlatType() {
        const params = {
          'group_id': 'PLAT_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.platTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      close() {
        this.isShow = !this.isShow
        this.withholdDetail = []
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum
        }
        this.fetchData(params)
      },
      search() {
        this.currentPage = 1
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'bill_id': this.form.bill_id,
          'card_id': this.form.card_id,
          'plat_id': this.form.plat_id,
          'plate_no': this.form.plate_no,
          'sys_bill_id': this.form.sys_bill_id
        }
        this.fetchData(params)
      },
      lookView(row, column) {
        this.isShow = !this.isShow
        const params = {
          'sys_bill_id': row['sys_bill_id']
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getWithholdDetail(params).then(res => {
          this.withholdDetail = res.data
        }).catch(errInfo => { })
        loading.close()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'bill_id': this.form.bill_id,
          'card_id': this.form.card_id,
          'plat_id': this.form.plat_id,
          'plate_no': this.form.plate_no,
          'sys_bill_id': this.form.sys_bill_id
        }
        this.fetchData(params)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'bill_id': this.form.bill_id,
          'card_id': this.form.card_id,
          'plat_id': this.form.plat_id,
          'plate_no': this.form.plate_no,
          'sys_bill_id': this.form.sys_bill_id
        }
        this.fetchData(params)
      },
      fetchData(params) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : []
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .el-table::before{  //去除模态框下边的黑线
    height: 0rem;
  }
  .page-num {
    float: right;
  }
  .content {
    height: 27.5rem;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.94rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .h100 {
    height: 3.2rem;
  }
  .w100 {
    display: block;
    width: 6.25rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }

  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 60%;
      height: 34rem;
      background-color: #fff;
    }
  }
</style>
